<template>
  <div>
    <div class="content-container" @click="handleSearch">
      <span class="content">{{ value }}</span>
      <p-icon class="icon" type="search" />
    </div>
    <p-modal
      v-model="visible"
      style="height: 400px"
      :title="title"
      :width="1400"
      :mask-closable="false"
      @ok="handleOk"
    >
      <div>
        <p-form-model :model="form" :rules="rulesComputed" layout="inline">
          <p-form-model-item label="机种编号">
            <p-input v-model="form.modelNumber" placeholder="请输入" />
          </p-form-model-item>
          <p-form-model-item label="机种名称">
            <p-input v-model="form.modelName" placeholder="请输入" />
          </p-form-model-item>
          <p-form-model-item label="销售组织">
            <SelectOrg v-model="form.salesOrganization" />
          </p-form-model-item>
          <p-button type="primary" class="btn-search" @click="search">
            搜索
          </p-button>
          <p-button @click="reset"> 重置 </p-button>
        </p-form-model>
        <p-button type="primary" @click="addModel"> 新增机种 </p-button>
        <p-table
          class="table-list-container"
          row-key="id"
          :columns="columns"
          bordered
          :data-source="dataSource"
          :pagination="pagination"
          v-bind="$attrs"
          v-on="$listeners"
          @change="change"
        >
          <a
            slot="serialNumber"
            slot-scope="text, record"
            @click="$emit('number-click', record)"
          >
            {{ text }}
          </a>
        </p-table>
      </div>
      <p-drawer
        placement="right"
        width="calc(100vw - 200px)"
        :visible="isShow"
        :closable="false"
        :destroy-on-close="true"
        @click="onclose"
      >
        <div class="messageMaskContent-connect">
          <div style="position: relative">
            <TaskTitle
              :title-name="loadtitle"
              :icon-name="loadicontitle"
              :color="loadcolor"
              :border="loadborder"
            />
            <TitleSecondary title="基本信息" />
            <p-button
              v-show="selectmodelNumber"
              class="commonbutton edit"
              type="primary"
              @click="edit"
            >
              编辑
            </p-button>
          </div>
          <p-form-model
            v-show="selectmodelNumber"
            class="commonbutton edit"
            type="primary"
            @click="edit"
          >
            <p-row type="flex" justify="space-around">
              <p-col :span="10" class="condition-row">
                <p-form-model-item label="机种编号">
                  <p-input
                    v-model="modelForm.modelNumber"
                    class="from-input"
                    disabled
                  />
                </p-form-model-item>
              </p-col>
              <p-col :span="10" class="condition-row">
                <p-form-model-item label="机种名称">
                  <p-input
                    v-model="modelForm.modelName"
                    class="from-input"
                    disabled
                  />
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
        </div>
        <div class="foot-connect">
          <p-button
            v-show="isEdit"
            style="margin-right: 10px"
            class="commonbutton"
            type="primary"
            @click="preserve"
          >
            保存
          </p-button>
          <p-button class="commonbutton" @click="back">返回</p-button>
        </div>
      </p-drawer>
    </p-modal>
  </div>
</template>

<script>
import { postModelList } from '@/api/modelInformation.js';
export default {
  components: {},
  props: {
    title: {
      type: String,
      default: '查询机种',
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
  },
  data() {
    return {
      loadicontitle: '',
      loadcolor: '',
      loadborder: '',
      loadtitle: '',
      dataSource: [],
      visible: false,
      isShow: false,
      isDisabledProvisional: false,
      isDisabledSalesOrganization: false,
      provisionalInfo: [],
      preserveState: 1,
      isDisabled: false,
      selectmodelNumber: true, //table中点击的机种编号
      isEdit: true,
      form: {
        modelNumber: '',
        modelName: '',
        salesOrganization: '',
        current: 1,
        pageSize: 10,
      },
      modelForm: {
        //新增机种的form表单的值
        modelNumber: '',
        modelName: '',
        provisional: '',
        salesOrganization: '',
        size: '',
        resolution: '',
        resolutionTwo: '',
        technology: '',
        bonding: '',
        notch: '',
        refreshRate: '',
        lightness: '',
        projectNumber: '',
        modelCutRate: '',
        remark: '',
      },
      resmodelForm: {
        //新增机种的form表单的值
        modelNumber: '',
        modelName: '',
        provisional: '',
        salesOrganization: '',
        size: '',
        resolution: '',
        resolutionTwo: '',
        technology: '',
        bonding: '',
        notch: '',
        refreshRate: '',
        lightness: '',
        projectNumber: '',
        modelCutRate: '',
        remark: '',
      },
      pagination: {
        pageSize: 10,
        current: 1,
        defaultPageSize: 10,
        pageSizeOptions: ['10', '20', '50', '100'],
        showLessItems: true,
        total: 0,
        showSizeChanger: true,
        showTotal: (total) => {
          return `总计${total}条`;
        },
      },
    };
  },
  computed: {
    OrganizationInfo() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
        isDict: false,
      });
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '',
          width: 40,
          dataIndex: 'salesGroupName',
        },
        {
          align: 'center',
          title: '机种编号',
          dataIndex: 'modelNumber',
        },
        {
          align: 'center',
          title: '机种名称',
          width: 150,
          dataIndex: 'modelName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '是否为临时机种',
          dataIndex: 'provisional',
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrganization',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '尺寸',
          dataIndex: 'size',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '分辨率',
          dataIndex: 'resolution',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '技术别',
          dataIndex: 'technology',
          ellipsis: true,
        },
        {
          align: 'center',
          title: 'Bonding方式',
          dataIndex: 'bonding',
          ellipsis: true,
        },
        {
          align: 'center',
          title: 'Notch方式',
          dataIndex: 'notch',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '刷新率',
          dataIndex: 'refreshRate',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  created() {
    this.search();
  },
  methods: {
    change(pagination, filters, sorter) {
      this.selectedRowKeys = [];
      this.form.current = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      if (sorter.order === 'ascend') {
        this.asc = true;
      } else {
        this.asc = false;
      }
      console.log(this.modelForm.modelNumber);
      this.loadModelList({
        current: pagination.current,
        pageSize: pagination.pageSize,
        column: sorter.columnKey,
        asc: this.asc,
        modelNumber: this.form.modelNumber,
        modelName: this.form.modelName,
        provisional: this.form.provisional,
        salesOrganization: this.form.salesOrganization,
      });
    },
    // 保存机种信息配置

    //增加机种
    addModel() {
      this.modelForm = {
        modelNumber: '',
        modelName: '',
        provisional: '',
        salesOrganization: '',
        size: '',
        resolution: '',
        resolutionTwo: '',
        technology: '',
        bonding: '',
        notch: '',
        refreshRate: '',
        lightness: '',
        projectNumber: '',
        modelCutRate: '',
        remark: '',
        createUserName: `${this.$store.state.user.name}`,
      };
      this.loadtitle = '新增机种';
      this.loadicontitle = 'New';
      this.loadcolor = 'red';
      this.loadborder = '2px solid red';
      this.changeCount = 0;
      this.isShow = true;
      this.selectmodelNumber = '';
      this.isEdit = true;
      this.isDisabled = false;
      this.isDisabledSalesOrganization = false;
      this.isDisabledProvisional = false;
      this.preserveState = 1;
    },

    async search() {
      //搜索
      this.form.current = 1;
      this.form.pageSize = 10;
      let res = await postModelList(this.form);
      if (res.data.code === 400) {
        this.data = [];
        this.pagination.total = 0;
      } else {
        res.data.data.records.forEach((item) => {
          if (item.salesOrganization === 'ltcltps') {
            item.salesOrganization = 'LTPS';
          } else if (item.salesOrganization === 'ltcsmsizebu') {
            item.salesOrganization = 'OLED';
          }
          if (item.provisional === '0') {
            item.provisional = '否';
          } else {
            item.provisional = '是';
          }
        });
        this.pagination.current = 1;
        this.pagination.pageSize = 10;
        this.dataSource = res.data.data.records;
        this.pagination.total = res.data.data.total;
      }
    },
    reset() {
      //重置input,select框
      this.form = {
        modelNumber: '',
        modelName: '',
        salesOrganization: '',
        current: 1,
        pageSize: 10,
      };
      this.loadModelList({
        current: 1,
        pageSize: 10,
      });
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
    },
    async loadModelList(form) {
      let res = await postModelList(form);
      res.data.data.records.forEach((item) => {
        if (item.salesOrganization === 'ltcltps') {
          item.salesOrganization = 'LTPS';
        } else if (item.salesOrganization === 'ltcoled') {
          item.salesOrganization = 'OLED';
        }
        if (item.provisional === '0') {
          item.provisional = '否';
        } else {
          item.provisional = '是';
        }
      });

      this.data = res.data.data.records;
      this.pagination.total = res.data.data.total;
    },
    handleSearch() {
      this.visible = true;
    },
    handleOk() {
      this.$emit('change', 'userText');
      this.visible = false;
    },
    back() {
      //返回
      if (this.preserveState === 1) {
        if (!this.isChange) {
          setTimeout(() => (this.isEdit = true), 500);
          this.isShow = false;
        } else {
          this.$confirm({
            top: 300,
            title: '返回将不保存修改数据，请确认是否返回',
            onOk: () => {
              setTimeout(() => (this.isEdit = true), 500);
              this.isShow = false;
            },
          });
        }
      } else {
        if (this.isChange === false) {
          setTimeout(() => (this.isEdit = true), 500);
          this.isShow = false;
        } else {
          this.$confirm({
            title: '返回将不保存修改数据，请确认是否返回',
            onOk: () => {
              setTimeout(() => (this.isEdit = true), 500);
              this.isShow = false;
            },
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    display: flex;
    justify-content: center;
    flex: 1;
  }
}
.table-list-container {
  margin-top: 20px;
  height: 390px !important;
}

.poros-form {
  padding: 10px 20px;
  width: 100%;
  border-bottom: 1px solid #e5e6e9;
}
.poros-form-item {
  width: 20%;
  margin-bottom: 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
.messageMaskContent-connect {
  width: 100%;
  height: 540px !important;
  overflow: auto;
}
.foot-connect {
  display: flex;
  justify-content: center;
  height: 35px;
  width: 100%;
}
</style>
